import { User, Mic, AlertCircle, Clock } from 'lucide-react';
import type { VideoGenerateRequest } from '../../types/video';
import type { Avatar } from '../../types/avatar';
import previewService from '../../services/previewService';

interface PreviewPanelProps {
  formData: VideoGenerateRequest;
  selectedAvatar: Avatar | null;
  voiceOptions: Array<{ id: string; name: string; language: string }>;
}

export default function PreviewPanel({
  formData,
  selectedAvatar,
  voiceOptions,
}: PreviewPanelProps) {
  const isValid = {
    title: !!formData.title?.trim(),
    script: !!formData.script.trim() && formData.script.length <= 1500,
    avatar: !!(formData.avatar_id || formData.talking_photo_id),
  };

  const completedCount = Object.values(isValid).filter(Boolean).length;

  // 估算视频时长
  const estimatedDuration = previewService.estimateVideoDuration(formData.script, 1.0);

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div className="w-96 bg-gray-50 border-l flex flex-col">
      <div className="p-6 pb-0">
        <h3 className="font-bold text-gray-900 mb-4">表单总览</h3>
      </div>
      <div className="flex-1 overflow-y-auto px-6 pb-6">
        <div className="space-y-6">
          {/* 进度指示器 */}
          <div className="p-4 bg-white rounded-lg border">
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="text-gray-600">完成进度</span>
              <span className="text-gray-800 font-medium">{completedCount} / 3 必填项</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-300"
                style={{ width: `${(completedCount / 3) * 100}%` }}
              />
            </div>
          </div>

          <div className="p-4 bg-white rounded-lg border">
            <p className="text-sm text-gray-700 mb-1 font-medium">视频标题</p>
            <p
              className={`font-semibold truncate ${
                isValid.title ? 'text-gray-900' : 'text-red-600'
              }`}
              title={formData.title || '未设置'}
            >
              {formData.title || '未设置（必填）'}
            </p>
          </div>

          <div className="p-4 bg-white rounded-lg border">
            <p className="text-sm text-gray-700 mb-1 font-medium">选中的数字人</p>
            {selectedAvatar ? (
              <div className="flex items-center gap-3">
                {selectedAvatar.preview_image ? (
                  <img
                    src={selectedAvatar.preview_image}
                    alt={selectedAvatar.name}
                    className="w-10 h-10 rounded-full object-cover"
                  />
                ) : (
                  <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <User className="w-5 h-5 text-blue-600" />
                  </div>
                )}
                <div className="flex-1 min-w-0">
                  <p
                    className="font-semibold text-sm text-gray-900 truncate"
                    title={selectedAvatar.name}
                  >
                    {selectedAvatar.name}
                  </p>
                  <p
                    className="text-xs text-gray-700 truncate"
                    title={`${formData.talking_photo_id ? 'Talking Photo' : 'Avatar'}${selectedAvatar.default_voice_id ? ' • 有默认语音' : ''}`}
                  >
                    {formData.talking_photo_id ? 'Talking Photo' : 'Avatar'}
                    {selectedAvatar.default_voice_id && ' • 有默认语音'}
                  </p>
                </div>
              </div>
            ) : (
              <p className="font-medium text-red-600">未选择（必填）</p>
            )}
          </div>

          <div className="p-4 bg-white rounded-lg border">
            <p className="text-sm text-gray-700 mb-1 font-medium">语音设置</p>
            {formData.voice_id ? (
              <div className="flex items-center gap-2">
                <Mic className="w-4 h-4 text-blue-600" />
                <div className="flex-1 min-w-0">
                  <p
                    className="font-semibold text-sm text-gray-900 truncate"
                    title={
                      voiceOptions.find(v => v.id === formData.voice_id)?.name ||
                      `语音ID: ${formData.voice_id}`
                    }
                  >
                    {voiceOptions.find(v => v.id === formData.voice_id)?.name ||
                      `语音ID: ${formData.voice_id}`}
                  </p>
                  {selectedAvatar?.default_voice_id === formData.voice_id && (
                    <p className="text-xs text-green-600 font-medium">Avatar默认语音</p>
                  )}
                </div>
              </div>
            ) : (
              <p className="font-medium text-gray-600">使用系统默认语音</p>
            )}
          </div>

          <div className="p-4 bg-white rounded-lg border">
            <p className="text-sm text-gray-700 mb-1 font-medium">脚本信息</p>
            <div className="space-y-1">
              <p
                className={`font-semibold ${formData.script.length > 1500 ? 'text-red-600' : isValid.script ? 'text-gray-900' : 'text-red-600'}`}
              >
                {formData.script.length} / 1500 字符
              </p>
              {formData.script.trim() && (
                <div className="flex items-center gap-2 text-sm">
                  <Clock className="w-4 h-4 text-blue-600" />
                  <span className="text-gray-700">预计时长:</span>
                  <span className="font-medium text-blue-600">{formatTime(estimatedDuration)}</span>
                </div>
              )}
            </div>
          </div>

          <div className="p-4 bg-white rounded-lg border">
            <p className="text-sm text-gray-700 mb-1 font-medium">视频比例</p>
            <p className="font-semibold text-gray-900">{formData.aspect_ratio}</p>
          </div>

          <div className="pt-4 border-t">
            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm font-bold text-blue-900">生成提示</p>
                  <p className="text-sm text-blue-800 mt-1 font-medium">
                    视频生成通常需要 2-5 分钟，具体时间取决于视频长度和服务器负载。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
